<style>
#UserInfoPage{
	padding: 16px;
	border-radius: 2px;
	background: #AAA;
	display: inline-block;
}
#UserInfoTable td{
	padding-top: 28px;
}
#UserInfoTable input{
	padding: 6px;
}
#UserInfoSaveButton{
	width: 90%;
	float: left;
	box-sizing: border-box;
}
#UserInfoExitButton{
	width: 90%;
	float: right;
	color: #C00;
	box-sizing: border-box;
}
</style>

<div id='UserInfoPage'>
	<table id='UserInfoTable'>
		<tr><td colspan='2'><v-icon id='UserInfoIconText' title='用户图像' path='user'></v-icon></td></tr>
		<tr><td colspan='2'><v-text id='UserInfoUserText' title='用户名称' maxlength='32' size='28'></v-text></td></tr>
		<tr><td colspan='2'><v-text id='UserInfoNameText' title='用户昵称' maxlength='32' size='28'></v-text></td></tr>
		<tr><td colspan='2'><v-text id='UserInfoMailText' title='关联邮箱' maxlength='128' size='28'></v-text></td></tr>
		<tr><td><v-button id='UserInfoSaveButton' title='保存修改'></v-button></td><td><v-button id='UserInfoExitButton' title='安全退出'></v-button></td></tr>
	</table>
</div>

<script>
getVue('UserInfoPage');

$('#UserInfoTable input').focus(function(){
	setToastTitle("<font color='#444' style='font-size:1.5rem;font-weight:bold'>用户信息</font>");
});

$('#UserInfoExitButton').click(function(){
	getHttpResult('/checklogin', {flag: 'Q'});

	clearCookie();

	window.location.href = '/';
});

$('#UserInfoSaveButton').click(function(){
	var param = {
		flag: 'M',
		user: $('#UserInfoUserText').val(),
		name: $('#UserInfoNameText').val(),
		mail: $('#UserInfoMailText').val(),
		icon: getBackgroundImage('UserInfoIconText')
	};

	getHttpResult('/edituser', param, function(data){
		if (data.code == XG_TIMEOUT){
			sessionTimeout();
		}
		if (data.code == XG_AUTHFAIL){
			showNoAccessToast();
		}
		else if (data.code < 0){
			setToastErrorText('更新用户信息失败');
		}
		else if (data.code > 0){
			showToast('更新用户信息成功');

			if (updateTitle){
				updateTitle();
			}
		}
		else{
			hideToastBox();
		}
	});
});

setToastTitle("<font color='#444' style='font-size:1.5rem;font-weight:bold'>用户信息</font>");

getHttpResult('/checklogin', {flag: 'C'}, function(data){
	if (data.code < 0){
		sessionTimeout();
	}
	else{
		$('#UserInfoNameText').val(data.name);
		$('#UserInfoMailText').val(data.mail);
		$('#UserInfoUserText').val(data.user).attr('disabled', true);
		$('#UserInfoIconText').css('background-image', 'url(' + data.icon + ')');
	}
});

</script>